<template>
  <space-info :detail-data="userInfo" :mid="mid"></space-info>
  <ul v-if="userInfo" class="tabs">
    <li
      v-for="tab in tabs"
      :key="tab.id"
      :class="{active: tab.component === currentTab}"
      @click="handleTab(tab)">{{tab.name}}</li>
  </ul>
  <keep-alive>
    <component ref="compRef" :is="currentComponent" v-bind="comProps" v-on="comEvents"></component>
  </keep-alive>
</template>

<script>
import { reactive, computed, toRefs, watch, defineAsyncComponent } from 'vue'
import SpaceInfo from './info'
import { spaceApi } from '@/api'
export default {
  name: 'Space',
  components: {
    SpaceInfo,
    SpacePosts: defineAsyncComponent(() => import('./posts')),
    SpaceVideos: defineAsyncComponent(() => import('./videos')),
    SpacePhotos: defineAsyncComponent(() => import('./photos'))
  },
  props: {
    mid: {
      type: [Number, String],
      required: true
    }
  },  
  setup(props) {
    const params = reactive({
      compRef: null,
      userInfo: null,
      currentTab: 'Posts',
      nextPostId: null,
      posts: [],
      tabs: [
        {
          id: 1,
          name: '动态',
          component: 'Posts'
        },
        {
          id: 2,
          name: '视频',
          component: 'Videos'
        },
        {
          id: 3,
          name: '相薄',
          component: 'Photos'
        }
      ],
      currentComponent: computed(() => {
        return `Space${params.currentTab}`
      }),
      comProps: computed(() => {
        const compProp = {
          mid: props.mid,
          list: params.currentTab === 'Posts' ? params.posts : []
        }
        return compProp
      }),
      comEvents: computed(() => {
        if (params.currentTab === 'Posts') {
          return {
            onLoad: handleLoad
          }
        } else {
          return {}
        }        
      })
    })

    const handleTab = tab => {
      params.currentTab = tab.component
    }

    const getInfo = async () => {
      try {
        const { data } = await spaceApi.getInfo({
          mid: props.mid
        })
        if (data) {
          params.userInfo = data
        }
      } catch (error) {
        console.log(error)
      }
    }

    const getPosts = async () => {
      try {
        const { data } = await spaceApi.getUserPosts({
          host_uid: props.mid,
          offset_dynamic_id: params.nextPostId || ''
        })
        if (data) {
          const { has_more, cards } = data
          if (has_more === 0) {
            params.nextPostId = -1
            params.compRef.complete()
          } else {
            params.nextPostId = cards[cards.length - 1].desc.dynamic_id_str
            params.posts.push(...cards)                
          }               
        }
      } catch (error) {   
        console.log(error)            
      } finally {
        params.compRef.stopLoading()
      }
    }

    const handleLoad = () => {      
      if (params.nextPostId === -1) {
        params.compRef.complete()
        return
      }
      getPosts()
    }

    watch(() => props.mid, () => {
      getInfo()
      params.nextPostId = null
      params.posts.splice(0, params.posts.length)
      getPosts()
    }, {
      immediate: true
    })

    return {
      ...toRefs(params),
      handleTab
    }
  }
}
</script>


<style lang="scss" scoped>
  .tabs {
    height: 40px;
    line-height: 40px;
    @include border1px(#e7e7e7, 1px 0);
    box-sizing: border-box;
    font-size: 0;
    padding-left: 12px;
    li{
      display: inline-block;
      margin-right: 32px;
      font-size: 13px;
      color: $color-text-regular;
      &.active{
        color: $theme-color;
      }
    }
  }
</style>